<template>
  <div class="work">
      <div class="header">
        <el-form :model="queryParams" ref="queryForm"  v-show="showSearch" :inline="true"  label-width="68px">
            <!-- <el-form-item label="考试名称" prop="recordName">
               <el-input
                v-model="queryParams.recordName"
                placeholder="请输入考试名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
                />
            </el-form-item> -->
            <el-form-item label="工作时间" class="recordName">
                <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" 
                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-form-item>
            <span style="color:#00FFE3">默认查询近30天的数据</span>
            </el-form-item>
        </el-form>

      </div>
      <div class="middle">
        <AnalyzeDoubleBarCharts class="middleTwo" :handleOfficeLineCharts="handleOfficeLineCharts" :chart-data="allLineChartOne"/>
        <AnalyzeDoubleBarCharts class="middleTwo" :handleOfficeLineCharts="handlePeopleLineCharts" :chart-data="OfficeLineChart"/>
        <AnalyzeDoubleBarCharts class="middleTwo" :handleOfficeLineCharts="handlePeopleTotalLineCharts" :chart-data="peopleLineCharts" />
        <AnalyzeLineCharts class="middleTwo"  :chart-data="peopleLineTotalCharts"/>
      </div>
      <div class="footer">
        <AnalyzeDoubleBarCharts class="middleTwo" :handleOfficeLineCharts="handleOfficeAvgLineCharts" :chart-data="deptAvgLineCharts"/>
        <AnalyzeDoubleBarCharts class="middleTwo" :handleOfficeLineCharts="handlePeopleAvgLineCharts" :chart-data="OfficeAvgLineCharts"/>
        <AnalyzeDoubleBarCharts class="middleTwo" :handleOfficeLineCharts="handlePeopleLineAvgCharts" :chart-data="peopleAvgLineCharts"/>
        <AnalyzeLineCharts class="middleTwo"  :chart-data="peopleLineAvgCharts"/>
      </div>

</div>      
</template>

<script>
import { queryLineChartsOne,queryOffice,queryDeptAvgLineCharts,queryOfficeAvgLineCharts,queryPeopleLineCharts,
queryPeopleAvgLineCharts,queryPeopleTotalLineCharts,queryPeopleLineAvgCharts} from "@/api/statistics/work/work.js";
import { getToken } from '@/utils/auth';
import echarts from 'echarts';
import AnalyzeDoubleBarCharts from '../work/barcharts/AnalyzeDoubleBarCharts';
import AnalyzeLineCharts from '../work/linecharts/AnalyzeLineCharts';

export default {
    name: "work",
    components:{
        AnalyzeDoubleBarCharts,
        AnalyzeLineCharts
    },
    data() {
        return {
            // 日期范围
            dateRange: [],
            // 显示搜索条件
            showSearch: true,
            allLineChartOne:{},
            OfficeLineChart:{},
            deptAvgLineCharts:{},
            OfficeAvgLineCharts:{},
            peopleLineCharts:{},
            peopleAvgLineCharts:{},
            peopleLineTotalCharts:{},
            peopleLineAvgCharts:{},
            // 查询参数
            queryParams: {
                // dateRange: [],
               // recordName: null,
            
            },
        }
    },
    created() {
        this.getList();
    },
    mounted () {
        let that = this
        this.handleLineChartsOne();
        this.handleOfficeLineCharts();
        this.handleDeptAvgLineCharts();
        this.handleOfficeAvgLineCharts();
        this.handlePeopleLineCharts();
        this.handlePeopleAvgLineCharts();
        this.handlePeopleTotalLineCharts();
        this.handlePeopleLineAvgCharts();
    },
    activated(){
    
    },
    methods: {
        /** 查询所有图表 */
        getList() {
            this.loading = true;
            // console.log("this.queryParams:"+JSON.stringify(this.queryParams));
            this.queryParams.deptId = "";
            this.handleOfficeLineCharts(this.addDateRange(this.queryParams,this.dateRange));
            this.handleLineChartsOne(this.addDateRange(this.queryParams,this.dateRange)); 
            this.handleDeptAvgLineCharts(this.addDateRange(this.queryParams,this.dateRange));   
            this.handleOfficeAvgLineCharts(this.addDateRange(this.queryParams,this.dateRange));   
            this.handlePeopleLineCharts(this.addDateRange(this.queryParams,this.dateRange));
            this.handlePeopleAvgLineCharts(this.addDateRange(this.queryParams,this.dateRange));
            this.handlePeopleTotalLineCharts(this.addDateRange(this.queryParams,this.dateRange));
            this.handlePeopleLineAvgCharts(this.addDateRange(this.queryParams,this.dateRange));
            this.loading = false;
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.queryParams.recordName = "";
            this.handleQuery();
            this.handleLineChartsOne();
            this.handleOfficeLineCharts();
            this.handleDeptAvgLineCharts();
            this.handleOfficeAvgLineCharts();
            this.handlePeopleLineCharts();
             this.handlePeopleAvgLineCharts();
             this.handlePeopleTotalLineCharts();
             this.handlePeopleLineAvgCharts();
        },
        // 各所总工时量
        handleLineChartsOne(params){
            queryLineChartsOne(params).then(response => {
               let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[],
                    pdata:[],
                    tdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.workValue)
                    newObject.zdata.push(item.id)
                    newObject.adata.push(item.allCount)
                    newObject.pdata.push(item.projectValue)
                    newObject.tdata.push(item.totalValue)
                })
                 newObject.bdata.push("各所总工时量(h)")//实考人数
                this.allLineChartOne = newObject;  
            });
        },
        // 查询科室的总工作量
        handleOfficeLineCharts(params){
            queryOffice(params).then(response => {
               let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[],
                    pdata:[],
                    tdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.workValue)
                    newObject.zdata.push(item.id)
                    newObject.adata.push(item.allCount)
                    newObject.pdata.push(item.projectValue)
                    newObject.tdata.push(item.totalValue)
                })
                newObject.bdata.push("各科室总工时量(h)");
                this.OfficeLineChart = newObject
            });
           this.handleOfficeAvgLineCharts(params);
        },
        // 查询人员
        handlePeopleLineCharts(params){
            queryPeopleLineCharts(params).then(response => {
               let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[],
                    pdata:[],
                    tdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.workValue)
                    newObject.zdata.push(item.id)
                    newObject.adata.push(item.allCount)
                    newObject.pdata.push(item.projectValue)
                    newObject.tdata.push(item.totalValue)
                })
                newObject.bdata.push("人员总工时(h)")
                this.peopleLineCharts = newObject
            });
            this.handlePeopleAvgLineCharts(params);
        },
         //查询所的工作饱和度
        handleDeptAvgLineCharts(params){
            queryDeptAvgLineCharts(params).then(response => {
                let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[],
                    pdata:[],
                    tdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.workValue)
                    newObject.zdata.push(item.id)
                    newObject.adata.push(item.allCount)
                    newObject.pdata.push(item.projectValue)
                    newObject.tdata.push(item.totalValue)
                })
                newObject.bdata.push("各所工作饱和度(%)")
                this.deptAvgLineCharts = newObject
            });
            
        },
        //查询科室的工作饱和度
        handleOfficeAvgLineCharts(params){
            queryOfficeAvgLineCharts(params).then(response => {
               let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[],
                    pdata:[],
                    tdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.workValue)
                    newObject.zdata.push(item.id)
                    newObject.adata.push(item.allCount)
                    newObject.pdata.push(item.projectValue)
                    newObject.tdata.push(item.totalValue)
                })
                newObject.bdata.push("各科室工作饱和度(%)")
                this.OfficeAvgLineCharts = newObject
            });
            
        },
        // 查询人员工作饱和度
        handlePeopleAvgLineCharts(params){
            queryPeopleAvgLineCharts(params).then(response => {
                let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[],
                    pdata:[],
                    tdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.workValue)
                    newObject.zdata.push(item.id)
                    newObject.adata.push(item.allCount)
                    newObject.pdata.push(item.projectValue)
                    newObject.tdata.push(item.totalValue)
                })
                newObject.bdata.push("人员工作饱和度(%)")
                this.peopleAvgLineCharts = newObject
            });
        },
        //人员近30工作曲线图
        handlePeopleTotalLineCharts(params){
            var name = "";
            queryPeopleTotalLineCharts(params).then(response => {
                let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[],
                    pdata:[],
                    tdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.time)
                    newObject.ydata.push(item.workValue)
                    newObject.zdata.push(item.userId)
                    newObject.adata.push(item.name)
                    newObject.pdata.push(item.projectValue)
                    newObject.tdata.push(item.totalValue)
                    name = item.name;
                })
                newObject.bdata.push(name+":近30天每日工时曲线图（h）")
                this.peopleLineTotalCharts = newObject
               
            });
             this.handlePeopleLineAvgCharts(params);
        },
        handlePeopleLineAvgCharts(params){
            var name = "";
            queryPeopleLineAvgCharts(params).then(response => {
                let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[],
                    pdata:[],
                    tdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.time)
                    newObject.ydata.push(item.workValue)
                    newObject.zdata.push(item.userId)
                    newObject.adata.push(item.name)
                    newObject.pdata.push(item.projectValue)
                    newObject.tdata.push(item.totalValue)
                    name = item.name;
                })
                newObject.bdata.push(name+":近30天每日工作饱和度曲线图（%）")
                this.peopleLineAvgCharts = newObject
                // console.log("测试："+JSON.stringify(newObject.xdata));
            });
        }
    },

  
    
};
</script>
<style>
.recordName .el-form-item__label{
    color:#fff;
    font-size: 12px;
} 
.work{
    padding: 1em;
    background-color:#1f2d3d;
}
.header{
    margin-left: 15px;
}
.middle{
    display: flex;
    justify-content: space-between;
    
}
.middleTwo{
    background-image: url('./../../../assets/image/data1.png'); 
    background-size: 100% 100%;
    border-radius: 2%;
    margin-left:10px;
    margin-right:10px;
}

.footer{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}
.GroupincomedistributionPie{
    width: 100%;
    height: 82%;
}

</style>